<template>
  <div class="lukeyDraw">
    <div class="lukeyDrawBg">
       <img src="../../assets/images/大转盘背景@2x.png" width="100%"/>
    </div>
   
    <div class="userCatNum">{{ showUserCatNum }}</div>
    <div class="luckeyDarwGiftBox">
      <!-- 调用了大转盘抽奖组件，传入奖品列表，子父通信完成点击指针抽奖事件 -->
      <CanvasLuckyDraw :giftList="giftList" @beganDraw="showPopup" />

      <!-- <img
        src="../../assets/images/大转盘1@2x.png"
        class="luckeyDarwGift"
        ref="luckydraw"
      />
      <img
        src="../../assets/images/指针@2x.png"
        class="luckeyDarwPointer"
        @click="showPopup"
      /> -->
    </div>
    <div class="luckeyDarwIntro">
      <div class="detailIntro">
        <span class="title">活动时间：</span>
        <div>2019.11.11-2019.11.14</div>
      </div>
      <div class="detailIntro">
        <span class="title">参与资格：</span>
        <div>1、活动时间内，金额满XXX元即可参与</div>
        <div>2、仅限会员参与</div>
      </div>
    </div>
    <van-popup v-model="show" :safe-area-inset-bottom="true">
      <!--输入用户信息弹窗框 -->
      <div class="popUserInfo" v-if="this.popStyle == 1">
        <div class="headTitle">参与活动</div>
        <div class="inputBox">
          <span class="inputTitle">车牌号</span>
          <input type="text" placeholder="请输入车牌号" v-model="userCatNum" />
        </div>
        <div class="inputBox">
          <span class="inputTitle">手机号</span>
          <input type="text" placeholder="请输入手机号" v-model="userPhone" />
        </div>
        <div class="inputBox inputBoxBottom">
          <span class="inputTitle">验证码</span>
          <input
            type="text"
            placeholder="请输入验证码"
            class="phoneCode"
            v-model="phoneCode"
          />
          <span class="sendCode" @click="sendPhoneCode">发送验证码</span>
        </div>
        <div class="twoButton">
          <button @click="buttonCancel">取消</button>
          <button @click="buttonEnsure">确定</button>
        </div>
      </div>

      <!--提示没有资格弹出框 -->
      <div class="popNoStatus" v-if="this.popStyle == 2">
        <div class="headTitle">提示</div>
        <div class="popNoStatusInfo">
          很抱歉，你暂不符合参与条件
        </div>
        <div class="oneButton">
          <button @click="buttonCancel">确定</button>
        </div>
      </div>

      <!-- 提示用户中奖弹出框 -->
      <div class="popGetGife" v-if="this.popStyle == 3">
        <!-- <img
          src="../../assets/images/恭喜您弹窗背景@2x.png"
          class="getGifeImg"
        /> -->
        <div class="intro" v-if="getGift == '谢谢参与'">
          谢谢参与
        </div>
        <div class="intro" v-else>
          获得{{ getGift }}，奖品已存至您的默认卡中，请注意查收哦~
        </div>
        <div class="QRcode"></div>
        <div class="note">扫描二维码前往查看</div>
        <div class="oneButton">
          <button @click="buttonCancel">确定</button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import CanvasLuckyDraw from '../../components/CanvasLuckyDraw'
export default {
  components:{
    CanvasLuckyDraw
  },
  data() {
    return {
      show: false, //控制弹窗是否显示
      popStyle: 3, //1显示输入用户信息 2显示没有资格 3显示抽奖成功
      showUserCatNum: "--", //显示用户输入的车牌号
      userCatNum: "", //用户输入的车牌号
      userPhone: "", //用户输入的手机号
      phoneCode: "", //用户输入的手机验证码
      animationFinsh: true, //判断动画是否结束
      giftList: [           //大转盘奖品列表
        "谢谢参与",
        "？？？？",
        "？？？？",
        "？？？？",
        "？？？？",
        "？？？？",
        "？？？？",
        "？？？？"
      ],
      getGift: ""//获奖物品
    };
  },
  created() {
    request({
      url:'192.168.0.110:8080/LotteryDraw/init'
    }).then(res=>{
      console.log(res)
    })
  },
  methods: {
    showPopup() {
      console.log("父组件接收到子组件的开始抽奖，进行条件判断");
      // 进行条件判断显示不同弹窗格式
      // this.popStyle=2;
      // this.show=true;
      // return

      //如果动画结束，可以进行下一次抽奖，节流
      if (this.animationFinsh){

        //随机数模拟中奖商品下标
        let index = parseInt(Math.random(7 - 0 + 1) * 7);
        console.log(index);

        //转盘初始化
        console.log("大转盘初始化前")
        this.luckydrawInit();
        console.log("大转盘初始化后")
        //调用转盘抽奖函数(奖品总量，获得奖品下标，旋转速度，动画时间)
        this.rotating(8, index, 6, 3); 
      }else{
        console.log("点击太快，请等动画执行完毕再重试")
      }
    },
    sendPhoneCode() {
      console.log("用户输入的手机号为" + this.userPhone);
      console.log("发送手机验证码");
    },
    buttonCancel() {
      console.log("触发弹窗关闭");
      this.show = false;
    },
    buttonEnsure() {

      //点击确定后，把用户输入的车牌号渲染到页面
      this.showUserCatNum = this.userCatNum;
      console.log(
        `车牌号${this.userCatNum}手机号${this.userPhone}验证码${this.phoneCode}`
      );
      console.log("点击确定按钮");
      this.show = false;
    },

    //大转盘初始化
    luckydrawInit(){
      this.animationFinsh=false;
        //获取到canvas的dom
        let lukeyDrawImage = document.getElementsByClassName("bigDraw")[0];
        lukeyDrawImage.setAttribute(
          "style",
          `transition-duration:0s;
         transform:rotate(0deg)`
        );
    },
    // 旋转大转盘函数，
    // giftNum表示奖品总数量，
    // giftIndex表示对应获奖奖品的下标,
    // speed表示旋转速度,越大旋转越快
    // time表示旋转动画的过渡时间
    rotating(giftNum, giftIndex, speed, time) {
      setTimeout(()=>{
        console.log("开始执行旋转");
      giftIndex += 1;

      //获取canvas的dom
      let lukeyDrawImage = document.getElementsByClassName("bigDraw")[0];

      lukeyDrawImage.style.transition = `all ${time}s ease-out`;
      lukeyDrawImage.style.transform = `rotate(-${360 * speed +
        (360 / giftNum) * (giftIndex ) -
        360 / giftNum / 2}deg)`;
      //设置定时器,动画结束后弹窗提示，设置动画结束
      setTimeout(() => {
        this.popStyle = 3;
        this.show = true;
        this.getGift = this.giftList[giftIndex - 1];
        this.animationFinsh=true;
      }, time + "200");
      },0)
    }
  }
};
</script>

<style lang="scss" scoped>
.lukeyDraw {
  width: 720px;
  position: relative;
  .lukeyDrawBg {
    position: fixed;
    width: 720px;
    height: 1133px;
    // height: 100%;
  }
  .userCatNum {
    font-size: 40px;
    color: #a70e0c;
    position: absolute;
    top: 210px;
    // top: 243px;
    width: 320px;
    left: 50%;
    margin-left: -162px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
  }
  .luckeyDarwGiftBox {
    height: 473px;
    width: 473px;
    position: absolute;
    left: 50%;
    margin-left: -237px;
    top: 312px;
    // top: 350px;
    text-align: center;
    .luckeyDarwGift {
      height: 473px;
      width: 473px;
      position: absolute;
      top: 0;
      left: 0;
      transition-property: all;
      transition-timing-function: ease-out;
    }
    .luckeyDarwPointer {
      height: 163px;
      width: 109px;
      position: relative;
      top: 130px;
    }
  }
  .luckeyDarwIntro {
    height: 230px;
    width: 600px;
    border-radius: 20px;
    background-color: #fae09e;
    position: fixed;
    bottom: 26px;
    left: 50%;
    margin-left: -300px;
    padding: 40px;
    box-sizing: border-box;
    .detailIntro {
      font-size: 24px;
      color: #9c1616;
      .title {
        font-weight: bold;
        position: absolute;
      }
      div {
        margin-left: 140px;
        margin-bottom: 12px;
        line-height: 36px;
      }
    }
  }
  /deep/ .van-popup.van-popup--center {
    border-radius: 20px;
    background: transparent;
  }
  .popUserInfo {
    overflow: hidden;
    width: 620px;
    height: 540px;
    background-color: #ffffff;
    border-radius: 20px;
    font-size: 32px;
    .headTitle {
      color: #272727;
      height: 104px;
      line-height: 104px;
      text-align: center;
    }
    .inputBox {
      padding: 0 40px;
      height: 80px;
      margin-bottom: 3;
      display: flex;
      justify-content: space-between;
      line-height: 80px;
      margin-bottom: 30px;
      .inputTitle {
        padding-right: 16px;
      }
      input {
        height: 80px;
        background-color: #f5f5f9;
        border-radius: 10px;
        border: 0;
        padding-left: 30px;
        width: 390px;
      }
      .phoneCode {
        width: 250px;
      }
      .sendCode {
        font-size: 26px;
        color: #4883c0;
      }
    }
    .inputBoxBottom {
      margin-bottom: 0;
      padding-bottom: 36px;
      border-bottom: 1px solid #cdcdcd;
    }
    .twoButton {
      height: 100px;
      button {
        height: 100%;
        width: 50%;
        border: 0;
        background-color: #ffffff;
        &:last-of-type {
          border-left: 1px solid #cdcdcd;
          color: #4883c0;
        }
      }
    }
  }
  .popNoStatus {
    border-radius: 20px;
    background-color: #ffffff;
    overflow: hidden;
    color: #272727;
    font-size: 32px;
    height: 320px;
    width: 620px;
    .headTitle {
      color: #272727;
      text-align: center;
      margin-top: 40px;
    }
    .popNoStatusInfo {
      padding: 49px 0;
      text-align: center;
    }
    .oneButton {
      height: 100px;
      width: 100%;
      button {
        height: 100%;
        width: 100%;
        border: 0;
        background-color: #ffffff;
        color: #4883c0;
        text-align: center;
        border-top: 1px solid #cdcdcd;
      }
    }
  }
  .popGetGife {
    overflow: hidden;
    // background: transparent;
    width: 620px;
    height: 960px;
    background-image: url(../../assets/images/恭喜您弹窗背景@2x.png);
    background-size: 620px 920px;
    font-size: 32px;
    // .getGifeImg {
    //     display: f;
    //   width: 620px;
    //   height: 920px;
    // }
    .intro {
      padding: 360px 50px 0 50px;
      color: #272727;
      line-height: 52px;
      text-align: center;
      margin-bottom: 40px;
    }
    .QRcode {
      height: 250px;
      width: 250px;
      background: #272727;
      margin: 0 auto;
    }
    .note {
      font-size: 28px;
      color: #737373;
      text-align: center;
      height: 110px;
      line-height: 110px;
    }
    .oneButton {
      height: 100px;
      width: 100%;
      button {
        height: 100%;
        width: 100%;
        border: 0;
        background-color: #ffffff;
        color: #4883c0;
        text-align: center;
        border-top: 1px solid #cdcdcd;
      }
    }
  }
}
</style>
